<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font: 16px Helvetica, Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="output"></div>
    <p>
      This page shows how to include VexFlow via direct <b>import</b> of an ES module entry file. View the source code.
    </p>
    <p>
      Open the vexflow/build/esm/entry/ folder to see the various entry points. This particular demo uses
      vexflow-core.js.
    </p>
    <p>
      This page only works if you run a web server in the <b>vexflow/</b> directory (e.g., <b>npx http-server</b> and
      navigate to
      <a href="http://127.0.0.1:8080/demos/modules/module.html">http://127.0.0.1:8080/demos/modules/module.html</a>).
    </p>
    <p>This is because ES modules do not work from file:// URLs.</p>
    <p>VexFlow Build: <span id="info"></span></p>
    <p>See also: <a href="script-tag.html">Script Tag</a></p>
    <script type="module">
      import Vex from '../../build/esm/entry/vexflow.js';
      Vex.Flow.setMusicFont('Petaluma');

      // Instead of the above two lines, use the code below
      // to load the music fonts dynamically.
      // This results in a smaller initial bundle, but adds some
      // latency due to the asynchronous loading of the fonts.
      //
      // import Vex from '../../build/esm/entry/vexflow-core.js';
      // await Vex.Flow.fetchMusicFont('Bravura');
      // Vex.Flow.setMusicFont('Bravura');
      // await Vex.Flow.fetchMusicFont('Gonville');
      // Vex.Flow.setMusicFont('Gonville');
      // await Vex.Flow.fetchMusicFont('Petaluma');
      // Vex.Flow.setMusicFont('Petaluma');

      const { VERSION, ID, DATE } = Vex.Flow.BUILD;
      document.querySelector('#info').innerText = `${VERSION} / ${ID} / ${DATE}`;

      const { Factory } = Vex.Flow;

      const factory = new Factory({
        renderer: { elementId: 'output', width: 500, height: 200 },
      });

      const score = factory.EasyScore();
      const system = factory.System();

      system
        .addStave({
          voices: [
            score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),
            score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),
          ],
        })
        .addClef('treble')
        .addTimeSignature('4/4');

      factory.draw();

      // Just for debugging, assign Vex.Flow to the global VF variable.
      // No you can do VF.setMusicFont('Gonville'); from the command line.
      window.VF = Vex.Flow;
    </script>
  </body>
</html>
